<template lang="pug">
  .container
    .header
      img.user_center_bg(:src="bgImg")
      .userInfo
        .user_photo
          img(:src="userInfo.avatarUrl")
        .userName {{ userInfo.nickName }}
    //- 我的订单
    .myorder(@click="toPath('order')")
      .title 我的订单
      .order-list
        .item
          i.icon.iconfont.icon-daifukuan
          text 待付款
        .item
          i.icon.iconfont.icon-daifahuo
          text 待发货
        .item
          i.icon.iconfont.icon-daishouhuofuben
          text 待收货
        .item
          i.icon.iconfont.icon-yiwancheng
          text 已完成
    //- 操作按钮
    .wrap
      .section_list(@click="toCart")
        .left
          i.icon.iconfont.icon-gouwuche
          text 购物车
        i.icon.iconfont.icon-youjiantou1.next_page
      .section_list(@click="toPath('favorite')")
        .left
          i.icon.iconfont.icon-shoucang
          text 我的收藏
        i.icon.iconfont.icon-youjiantou1.next_page
      .section_list(@click="toPath('coupon')")
        .left
          i.icon.iconfont.icon-youhuiquan
          text 我的优惠券
        i.icon.iconfont.icon-youjiantou1.next_page
      button.section_list(open-type="contact")
        .left
          i.icon.iconfont.icon-zaixiankefu1
          text 在线客服
        i.icon.iconfont.icon-youjiantou1.next_page
      .section_list.last(@click="showContact")
        .left
          i.icon.iconfont.icon-zaixiankefu
          text 联系我们
        i.icon.iconfont.icon-youjiantou1.next_page

        


</template>
<script>
import bgImg from "static/images/user_center_bg.png"

export default {
    data () {
        return {
            bgImg: bgImg,
            userInfo: "",
            show: false
        }
    },
    mounted () {
        var that = this;
        wx.getSetting({
            success: function(res) {
                if (res.authSetting["scope.userInfo"]) {
                    wx.getUserInfo({
                        success: res => {
                            that.userInfo = res.userInfo
                            wx.setStorageSync("userInfo", res.userInfo)
                        }
                    })
                }
            }
        })
    },
    methods: {
      toCart () {
        var url = "/pages/mall/cart/main"
        wx.switchTab({url})
      },
      toPath (type) {
        var url = ""
        switch (type) {
          case "favorite":
            url = "/pages/user/favorites/main"
            break
          case "order":
            url = "/pages/order/myOrder/main"
            break
          case "coupon":
            url = "/pages/user/coupon/main"
            break
          default:
            break
        }
        if (url) {
          wx.navigateTo({ url })
        } else {
          console.error('wrong type :' + type)
        }
      },
      // 
      showContact () {
        wx.makePhoneCall({
          phoneNumber: "15738382345"
        })
      }
    }
}
</script>
<style lang="scss" scoped>
@import "@/styles/scss/public.scss";
.header {
    position: relative;
    width: 100%;
    .user_center_bg {
      width: 100%;
      height: 143px;
    }
    .userInfo {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      color: #fff;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .user_photo {
        width: 55px;
        height: 55px;
        background-color: #fff;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .userName {
        margin-top: 12px;
      }
    }
}
// 订单
.myorder {
  margin: $margin10 0;
  color: $goodsName;
  font-size: 13px;
  width: 100%;
  .title {
    background: $bg-white;
    margin-bottom: 1px;
    padding: 12px;
    font-size: 15px;
  }
  .order-list {
    background: $bg-white;
    display: flex;
    .item {
      @include display-flex-cen;
      flex-direction: column;
      flex: 1;
      padding: 12px 0;
      i {
        font-size: 22px;
      }
      text {
        margin-top: 2px;
      }
    }
  }
}
// g功能按钮
.wrap {
  height: 100%;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  background: $bg-white;
  .section_list {
    letter-spacing: 2px;
    font-size: 15px;
    color: $goodsName;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eaeaea;
    line-height: 50px;
    .next-page {
      color: $gray;
    }
    .left {
      display: flex;
      align-items: center;
      i {
        font-size: 20px;
        margin-right: 12px;
      }
      .icon-gouwuche {
        color: #ec554e;
      }
      .icon-icon2 {
        color: #c36d99;
      }
      .icon-youhuiquan {
        color: #f1a531;
      }
      .icon-zaixiankefu1 {
        color: #6597df;
      }
      .icon-zaixiankefu {
        color: #2fc37c;
      }
      .icon-shoucang {
        color: $red;
      }
    }
  }
  .last {
    border: 0;
  }
  button {
    background: #fff;
    margin: 0;
    padding: 0;
  }
}

.call {
  background: red;
  height: 100px;
  width: 100%;
  position: absolute;
  bottom: 0;
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: #000;
  opacity: 0.7;
  z-index: 999;
}
</style>
